<template>
    <el-container>
        <el-header>
            <el-container>
                <PrimaryButton text="增加" :click="showAdd" />
                <SearchInput placeholder="请输入MU" :change="(value)=>handleChange(value,'mu')" />
                <SearchButton :click="search" />
            </el-container>
        </el-header>
        <el-main>
            <el-table stripe :data="tableData" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="loading">
                <el-table-column prop="mu" label="编号" width="180" />
                <el-table-column prop="phone" label="电话" />
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <PlainButton text="编辑" :click="()=>showUpdate(scope.row.mu)" />
                        <PlainButton text="删除" :click="()=>doDelete(scope.row.mu)" />
                    </template>
                </el-table-column>
            </el-table>
            <SearchPagination :currentPage="currentPage" :total="total" :limit="limit" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" />
        </el-main>
        <el-dialog width="35%" title="添加" :visible.sync="showAddForm">
            <el-form ref="form" :rules="rules" :model="form" label-width="100px">
                <el-form-item prop="phone" label="电话">
                    <el-input v-model="form.phone" placeholder="请输入电话" />
                </el-form-item>
                <el-form-item>
                    <PrimaryButton text="确定" :click="doAdd" />
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog width="35%" title="修改" :visible.sync="showUpdateForm">
            <el-form ref="updateForm" :rules="rules" :model="updateForm" label-width="100px">
                <el-form-item prop="phone" label="电话">
                    <el-input v-model="updateForm.phone" placeholder="请输入电话" />
                </el-form-item>
                <el-form-item>
                    <PrimaryButton text="确定" :click="doUpdate" />
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-container>
</template>
<script>
import {
    pagemx,
    removemx,
    addmx,
    updatemx
} from "@/chaos/functions/mixin/CRUD";

export default {
    name: "ChaosUser",
    mixins: [pagemx, removemx, addmx, updatemx],
    data() {
        const rules = {
            phone: [{ required: true, message: "请输入电话", trigger: "blur" }]
        };
        return {
            domain: "chaosUser",
            rules
        };
    }
};
</script>
<style lang="scss" scoped>
.el-form {
    width: 500px;
}
</style>
